<template>
  <div class="main" v-if="config">
    <van-nav-bar title="重置密码" left-arrow @click-left="$router.back()" />
    <div class="formbox">
      <van-form @submit="confirmPsd" ref="form">
        <van-field
          :type="inputType"
          v-model="newPsd"
          name="newPsd"
          label="请输入新密码"
          placeholder="请输入您要修改的密码"
          :rules="[
            {
              pattern,
              required: true,
              trigger: 'onChange',
              message:
                '以字母开头，长度在 6~18 之间，只能包含字母、数字和下划线',
            },
          ]"
        >
          <template #button>
            <span native-type="button" @click="isShow">
              <img src="~@/assets/svg/psdNo.svg" v-if="showPsd" />
              <img src="~@/assets/svg/psdYes.svg" v-else />
            </span>
          </template>
        </van-field>
        <van-field
          v-model="newPsdTwo"
          type="password"
          name="newPsdTow"
          label="请再次输入"
          placeholder="请再次输入您要修改的密码"
          :rules="[
            { required: true, message: '密码不能为空' },
            { validator, trigger: 'onBlur', message: '密码不一致' },
          ]"
        >
          <template #button>
            <span native-type="button" @click="isShowTwo">
              <img src="~@/assets/svg/psdNo.svg" v-if="showPsdTwo" />
              <img src="~@/assets/svg/psdYes.svg" v-else />
            </span>
          </template>
        </van-field>
        <div class="title">
          <span>提示：登录密码应为 6～18 数字 + 字母 + 下划线组合</span>
        </div>
        <div style="margin: 16px">
          <van-button block type="info" native-type="submit">确认</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { resetPassword } from "@/api/login";
export default {
  name: "",
  props: {},
  components: {},
  data() {
    return {
      newPsd: "",
      newPsdTwo: "",
      pattern: /^[a-zA-Z]\w{5,17}$/, // 以字母开头，长度在 6~18 之间，只能包含字母、数字和下划线
      config: true, // 页面隐藏
      showPsd: true, // 切换小眼睛
      showPsdTwo: true, // 切换小眼睛二
      inputType: "password",
    };
  },
  methods: {
    // 切换小眼睛
    isShow() {
      this.showPsd = !this.showPsd;
      if (this.showPsd) {
        this.inputType = "password";
      } else {
        this.inputType = "text";
      }
    },
    // 切换小眼睛二
    isShowTwo() {
      this.showPsdTwo = !this.showPsdTwo;
      if (this.showPsdTwo) {
        this.inputType = "password";
      } else {
        this.inputType = "text";
      }
    },
    // 验证两次密码是否相同
    validator(val) {
      if (this.newPsd === val) {
        return true;
      } else {
        return false;
      }
    },
    // 提交表单
    async confirmPsd() {
      try {
        await this.$refs.form.validate();
        await this.$dialog.confirm({
          message: "确定要重置密码吗?",
          theme: "round-button",
          closeOnClickOverlay: true,
        });

        // 发请求重置密码
        try {
          await resetPassword({
            ...this.userInfo,
            newPsdTwo: this.newPsdTwo,
          });
        } catch (error) {
          console.log("reset", error);
        }

        this.config = false; // 背景隐藏
        await this.$dialog.alert({
          message: "密码重置成功，即将返回登录",
          theme: "round-button",
          confirmButtonColor: "#FA7D22",
          confirmButtonText: "返回登录",
          // 跳转页面...
        });
        this.$router.push("/login");
      } catch (error) {
        console.log(error);
      }
    },
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
};
</script>
<style scoped lang="less">
.main {
  background-color: #f0f0f0;
  height: 100vh;
  .van-nav-bar {
    /deep/ .van-nav-bar__title {
      font-weight: 600;
    }
    /deep/ .van-nav-bar__left {
      .van-icon {
        color: #414655 !important;
        font-weight: 600;
      }
    }
  }
  .formbox {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .van-form {
      height: 228px;
      .van-cell {
        padding-top: 67px;
        flex-direction: column;
        /deep/ .van-field__body {
          padding: 40px 0 10px;
        }
        /deep/ .van-cell__title {
          font-weight: 600;
        }
      }
      /deep/ .van-cell .confirmButtom {
        padding-top: 20px !important;
      }
      .van-button {
        height: 88px;
        width: 694px;
        border: none;
        font-weight: 550;
        border-radius: 16px;
        background: linear-gradient(270deg, #ff512f, #f09819);
        box-shadow: 0 6px 12px #eb323266;
      }
    }
  }

  .title {
    font-size: 24px;
    color: #a5a9b3;
    margin: 40px 0;
    text-align: center;
  }
  /deep/ .verCodeBtn {
    width: 200px !important;
    height: 64px !important;
    line-height: 64px !important;
    text-align: center !important;
    font-size: 26px !important;
    color: #5c5d60 !important;
    border: #ccc !important;
    border-radius: 10px !important;
    background: #fcfafa !important;
    box-shadow: none !important;
  }
}
</style>
